<template>
  <div class="writeSub">
    <div class="inputText">
      <el-input
        v-model="textTitle"
        type="textarea"
        placeholder="想杠的题目..."
        maxlength="30"
        show-word-limit
        resize="none"
      />
      <div class="optionBox">
        <div class="optionLeft">
          <el-input v-model="optionOne" placeholder="输入蓝色观点" class="blue"
                    maxlength="6"
          />
        </div>
        <div class="optionRight">
          <el-input v-model="optionTwo" placeholder="输入红色观点" maxlength="6" />
        </div>
      </div>
    </div>
    <div class="detailDes">
      <el-input
        v-model="textDes"
        type="textarea"
        placeholder="描述信息（选填）"
        maxlength="300"
        show-word-limit
        resize="none"
      />
    </div>
    <el-button type="primary" round @click="submitInsertSub">
      提交
    </el-button>
  </div>
</template>
<script>
import eventBus from '@/api/eventBus';
import { insertSubject } from '../../../api/subject';
import { transformTimestamp } from '../../../utils/validate';
export default {
  data() {
    return {
      textTitle: '',
      optionOne: '',
      optionTwo: '',
      textDes: ''
    };
  },
  created() {
    eventBus.$emit('changeTitle', '新建杠题');
  },
  beforeDestroy() {
    eventBus.$emit('changeTitle', '首页');
  },
  methods: {
    submitInsertSub() {
      const params = {
        qtitle: this.textTitle,
        qdesc: this.textDes,
        optionOne: this.optionOne,
        optionTwo: this.optionTwo,
        posttime: transformTimestamp(new Date()),
        uid: this.$store.getters.userInfo.uid
      };
      if (this.textTitle === '' || this.optionOne === '' || this.optionTwo === '') {
        this.$message({
          showClose: true,
          message: '请填写必填字段',
          type: 'error'
        });
        return;
      }
      insertSubject(params).then(res => {
        if (res.data.code === 200) {
          this.$message({
            showClose: true,
            message: '发表成功',
            type: 'success'
          });
          this.$router.goBack();
        } else {
          this.$message({
            showClose: true,
            message: '发表失败',
            type: 'error'
          });
        }
      });
    }

  }
};
</script>
<style lang="scss">
.inputText{
  .el-input{
    input::-webkit-input-placeholder{
       color: #F56C6C;
    }
    .el-input__inner{
      border: none;
      color: #F56C6C;
      background: transparent;
    }
  }
  .blue{
    input::-webkit-input-placeholder{
      color: #409EFF;
    }
    .el-input__inner{
      border: none;
      color: #409EFF;
      background: transparent;
    }
  }
  .el-textarea{
     height: 60px;
    .el-textarea__inner{
      border: none;
      height: 60px;
      background: #fff;
    }
  }
}
.detailDes{
  .el-textarea{
    height: 100%;
    .el-textarea__inner{
      height: 100%;
      border: none;
      background: #F2F6FC;
    }
  }
}
.writeSub{
  position: relative;
  .el-button{
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
    margin: 10px auto;
    width: 90%;
  }
}
</style>
<style lang="scss" scoped>
.writeSub{
  width: 100%;
  height: 100%;
  background: #fff;
  .optionBox{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .optionLeft{
      width: 35%;
      height: 36px;
      border-radius: 20px;
      background: rgb(196, 225, 255);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .optionRight{
      width: 35%;
      height: 36px;
      border-radius: 20px;
      background: rgb(252, 228, 228);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .detailDes{
    width: 100%;
    height: 200px;
  }
}
</style>
